<template>
  <div>
    <h2>开发者列表</h2>
    <ul class="developer-list">
      <li v-for="developer in developers" :key="developer.name" class="developer-item">
        <strong>{{ developer.name }}</strong> - 人才排名: {{ developer.talentRank }} - 国家: {{ developer.nation }} - 领域: {{ developer.field }} - 信心: {{ developer.confidence || '无' }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    developers: {
      type: Array,
      required: true
    }
  }
};
</script>


<style>
.developer-list {
  list-style-type: none;
  padding: 0;
}

.developer-item {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin: 10px 0;
  transition: background-color 0.3s;
}

.developer-item:hover {
  background-color: #f1f1f1;
}
</style>